<template>
    <el-dialog class="myDialog" :title="title" :visible.sync="flag" :width="width" @close="close" :close-on-click-modal="false">
        <div>
            <slot/>
        </div>
        <span slot="footer" class="dialog-footer" v-if="showBtn">
            <el-button @click="close" size="small">取 消</el-button>
            <el-button type="primary" size="small" @click="$emit('confirm')">确 定</el-button>
        </span>
    </el-dialog>
</template>
<script>
export default {
    props:{
        title:{
            type:String,
            default:'提示'
        },
        width:{
            type:String,
            default:"50%"
        },
        height:{
            type:String,
            default:"auto"
        },
        showBtn:{
            type:Boolean,
            default:()=>true
        }
    },
    data(){
        return{
            flag:true
        }
    },
    methods:{
        close(){
           this.$emit('update:show', false)
           this.$emit('close')
        }
    }
}
</script>

<style lang="scss">
    .myDialog{
        display: flex;
        overflow: hidden;
        align-items: center;
        justify-content: center;
        max-height: 100%;
        overflow: hidden;
        overflow-y: auto;
        .el-dialog{
            margin: 0!important;
        }
        .el-dialog__body{
            padding-top: 10px;
            padding-bottom: 10px;
        }
    }
</style>